<!--用户列表展示组件-->
<template>
  <div class="userList">
    <el-form ref="form" :inline="true" label-position="top" :model="form" label-width="80px">
      <el-form-item label="手机号">
        <el-input v-model="form.phone" size="small"></el-input>
      </el-form-item>
      <el-form-item label="注册时间">
        <el-date-picker
          v-model="timeDate"
          type="daterange"
          align="right"
          size="small"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item class="btn">
        <el-button type="primary" size="small" @click="onQuery">查询</el-button>
      </el-form-item>
    </el-form>
    <el-card class="box-card">
      <el-table
        :data="userList"
        style="width: 100%">
        <el-table-column
          align="center"
          prop="id"
          label="用户ID"
          width="120px">
        </el-table-column>
        <el-table-column
          align="center"
          label="头像"
          width="100px">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.portrait || '//www.lgstatic.com/thumbnail_100x100/i/image2/M01/5E/65/CgotOVszSAOANi0LAAAse2IVWAE693.jpg'">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="用户名">
        </el-table-column>
        <el-table-column
          align="center"
          prop="phone"
          label="手机号">
        </el-table-column>
        <el-table-column
          align="center"
          label="注册时间">
          <template slot-scope="scope">
            <span>{{scope.row.createTime | timeFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="状态">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="ENABLE"
              inactive-valu="DISABLE"
              disabled>
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="操作"
          width="80px">
          <template slot-scope="scope">
            <el-button type="text" @click="allocRole(scope.row.id)">分配角色</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.currentPage"
      :page-sizes="[10, 20, 30]"
      :page-size="form.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
    <alloc-role ref="allocRole"></alloc-role>
  </div>
</template>

<script>
import { getUserPages } from '@/services/users'
import allocRole from './allocRole'
export default {
  name: 'userList',
  components: {
    allocRole
  },
  data () {
    return {
      form: {
        pageSize: 10,
        currentPage: 1
      },
      timeDate: [],
      totalCount: 0,
      userList: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created () {
    this.getUserPages()
  },
  methods: {
    async getUserPages () {
      if (this.timeDate && this.timeDate.length) {
        this.form.startCreateTime = this.timeDate[0]
        this.form.endCreateTime = this.timeDate[1]
      } else {
        this.form.startCreateTime = ''
        this.form.endCreateTime = ''
      }
      const { data } = await getUserPages(this.form)
      console.log(data)
      if (data.code === '000000') {
        this.userList = data.data.records
        this.totalCount = data.data.total
      }
    },
    handleSizeChange (val) {
      this.form.pageSize = val
      console.log(this.form.size)
      this.getUserPages()
    },
    handleCurrentChange (val) {
      this.form.currentPage = val
      this.getUserPages()
    },
    // 查询
    onQuery () {
      this.form.current = 1
      this.getUserPages()
    },
    // 分配角色
    allocRole (id) {
      // 通过访问子组件的dialogOpen()来打开弹窗
      this.$refs.allocRole.dialogOpen(id)
    }
  },
  filters: {
    timeFilter (val) {
      const date = new Date(val)
      function time (value) {
        if (value < 10) {
          return '0' + value
        }
        return value
      }
      return `
        ${date.getFullYear()}-${time(date.getMonth() + 1)}-${time(date.getDate())}
        ${date.getHours()}:${time(date.getMinutes())}-${time(date.getSeconds())}
      `
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__label{
  padding: 0 !important;
}
.btn{
  margin-top: 40px;
}
.el-image{
  width: 30px;
  height: 30px;
  ::v-deep .el-image__inner {
    border-radius: 50% !important;
  }
}
.el-pagination {
  margin-top: 5px;
  float: right;
}
</style>
